
import React, { Component } from 'react'
import {
  Container,
  Header,
  Title,
  Content,
  Text,
  Button,
  Icon,
  Footer,
  FooterTab
} from 'native-base'

// import { setIndex } from '../../actions/list';
import styles from './styles'
import theme from '../../themes/base-theme'

import Contacts from '../contacts'
import Channel from '../channel'

const  CONTACTS = 'contacts'
const CHANNEL = 'channel'

const CurrentTab = (tabName) => {
  switch (tabName) {
    case CONTACTS:
      return (<Contacts/>)
    case CHANNEL:
      return (<Channel/>)
  }
}

const Home = (props) => {
  const { navigation, onLeftBtnPress, onRightBtnPress, footer, onTabPress } = props
  return (
    <Container style={styles.container} theme={theme} >
      <Header>
        <Button transparent onPress={ () => onLeftBtnPress(navigation) }>
          <Icon name="ios-power" />
        </Button>

        <Title>主页</Title>

        <Button transparent onPress={ () => onRightBtnPress() }>
          <Icon name="ios-menu" />
        </Button>
      </Header>

      <Content>
        {CurrentTab(footer.currentTab)}
      </Content>
      <Footer>
        <FooterTab >
          <Button active={CONTACTS===footer.currentTab} onPress={() => onTabPress(CONTACTS) } >
            <Icon name="ios-contacts"/>
            联系人
          </Button>
          <Button active={CHANNEL===footer.currentTab} onPress={() => onTabPress(CHANNEL) } >
            频道
            <Icon name="ios-chatboxes" />
          </Button>
          <Button active={'tab3'===footer.currentTab} onPress={() => onTabPress('tab3') } >
            私信
            <Icon name="ios-text" />
          </Button>
        </FooterTab>
      </Footer>
    </Container>
  )
}

Home.propTypes = {
  onLeftBtnPress: React.PropTypes.func,
  onRightBtnPress: React.PropTypes.func,
  navigation: React.PropTypes.shape({
    key: React.PropTypes.string,
  }),
}

export default Home

// {this.props.list.map((item, i) =>
//   <Row key={i}>
//     <TouchableOpacity
//       style={styles.row}
//       onPress={() => this.pushRoute('blankPage', i)}
//     >
//       <Text style={styles.text}>{item}</Text>
//     </TouchableOpacity>
//   </Row>
// )}
